<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/pages/front_include/head.html"/>
</head>
<!--/head-->

<body>
    <!--loading-->
    <div class="preloader"> <i class="fa fa-circle-o-notch fa-spin"></i></div>
    <!--/loading-->
    <header id="home">
        <!-- nav -->
        <#include "/pages/front_include/main_nav.html"/>
        <!-- /nav -->
        <!-- banner -->
        <div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active" style="background-image: url(pages/front/Assets/images/slider/01.jpg)">
                    <div class="caption">
                        <h1 class="animated fadeInLeftBig">案例展示</h1>
                    </div>
                </div>
            </div>
            <a id="tohash" href="#services"><i class="fa fa-angle-down"></i></a>
        </div>
        <!-- /banner -->
    </header>
    <!--/#home-->
    <!-- 培训内容 -->
    <section id="services">
        <div class="container">
            <div class="heading wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
                <div class="row">
                    <div class="text-center col-sm-8 col-sm-offset-2 big-title">
                        <h2>案例展示</h2>
                        <p>Case presentation</p>
                    </div>
                </div>
            </div>
            <div class="our-services">
                <div class="row">
                    <div class="col-sm-3 text-center">
                        <a style="cursor:pointer" href="${basePaht!}/cases?columnId=13" target="_self">
                        <h3 <#if currentColumnId==13>class="active"</#if>>衣服</h3>
                        </a>
                    </div>
                    <div class="col-sm-3 text-center">
                        <a style="cursor:pointer" href="${basePaht!}/cases?columnId=14" target="_self">
                        <h3 <#if currentColumnId==14>class="active"</#if>>鞋子</h3>
                        </a>
                    </div>
                    <div class="col-sm-3 text-center">
                        <a style="cursor:pointer" href="${basePaht!}/cases?columnId=15" target="_self">
                        <h3 <#if currentColumnId==15>class="active"</#if>>包装</h3>
                        </a>
                    </div>
                    <div class="col-sm-3 text-center">
                        <a style="cursor:pointer" href="${basePaht!}/cases?columnId=16" target="_self">
                        <h3 <#if currentColumnId==16>class="active"</#if>>其他</h3>
                        </a>
                    </div>
                </div>
                <br>
                <#if (casePictures?size>0)>
                    <#list casePictures as case>
                        <#if (case_index%4)==0>
                            <!-- 最外层 4 个图片 一行 -->
                            <div class="row case">
                        </#if>
                        <#if (case_index%2)==0>
                            <!-- 第二层 2 个图片 一组 -->
                            <div class="col-sm-5 shade">
                        </#if>

                        <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                            <img src="img?fileName=${case.filePath!}" class="maximg img-circle">
                        </div>

                        <#if ((case_index+1)%2)==0>
                            <!-- 第二层 2 个图片 一组 -->
                            <div class="clearfix"></div>
                            <br>
                            <div class="text-center">${case.name}</div>
                            </div>
                        </#if>

                        <#if ((case_index+1)%4)==0>
                            <!-- 最外层 4 个图片 一行 -->
                            </div>
                        </#if>
                    </#list>
                <#else>
                    <div class="row case">
                        <div class="col-sm-5 shade">
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            <div class="text-center">染色前后对比</div>
                        </div>
                        <div class="col-sm-5  col-md-offset-1 shade">
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            <div class="text-center">染色前后对比</div>
                        </div>
                    </div>
                     <div class="row case">
                        <div class="col-sm-5 shade">
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            <div class="text-center">染色前后对比</div>
                        </div>
                        <div class="col-sm-5  col-md-offset-1 shade">
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            <div class="text-center">染色前后对比</div>
                        </div>
                    </div>
                    <div class="row case">
                        <div class="col-sm-5 shade">
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            <div class="text-center">染色前后对比</div>
                        </div>
                        <div class="col-sm-5  col-md-offset-1 shade">
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                                <img src="pages/front/Assets/images/temp/04.jpg" class="maximg img-circle">
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            <div class="text-center">染色前后对比</div>
                        </div>
                    </div>
                </#if>
            </div>
        </div>
    </section>
    <!-- footer_js.html -->
    <#include "/pages/front_include/footer_js.html"/>
</body>

</html>